<template>
  <van-row v-if="user.isLogin" class="user-denglu">
    <van-image v-if="user.avatar" round width="100" height="100" src="{{ user.avatar }}" />
    <van-image round width="100" height="100" :src="avatar_default" />
    <span class="name">{{ user.username }}</span>
    <van-button plain type="danger" size="mini" @click="onLogout">退出</van-button>
  </van-row>
  <van-row class="user-denglu" v-else>
    <van-image round width="100" height="100" :src="avatar_default" />
    <router-link to="/login">
      <span class="name">登录</span>
    </router-link>
    <span class="divider">|</span>
    <router-link to="/register">
      <span class="name">注册</span>
    </router-link>
  </van-row>
  <van-row class="user-links">
    <van-col span="6" v-for="link in links" :key="link.icon">
      <van-icon :name="link.icon" />
      <span>{{ link.text }}</span>
    </van-col>
  </van-row>
  <van-cell-group class="my-title">
    <van-cell icon="records-o" title="全部订单" is-link />
    <van-cell icon="points" title="我的积分" is-link />
    <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
    <van-cell icon="gift-o" title="我的红包" is-link />
  </van-cell-group>
</template>

<script setup>
import avatar_default from "../img/avatar_default.png";
import { ref } from "vue";
import router from "../router/index";
import useUser from "../store/user";
import { showToast } from "vant";

const { user, removeUser } = useUser();


const onLogout = async () => {
  removeUser();
  router.push({ name: "user" });
  showToast({
    message: "退出成功",
    type: "success",
  });
};

const links = ref([
  { icon: "pending-payment", text: "待付款" },
  { icon: "records-o", text: "待收货" },
  { icon: "tosend", text: "待评价" },
  { icon: "logistics", text: "退换/售后" },
]);
</script>

<style scoped>
.user-denglu {
  display: flex;
  align-items: center;
  padding: 15px;
  background: url(../img/user_head_bg.png) no-repeat center center;
  background-size: cover;
}

.user-denglu .van-image {
  margin-right: 15px;
}

.name {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}

.divider {
  margin: 0 10px;
  color: #ccc;
}

.user-links {
  text-align: center;
  background-color: #fff;
}

.user-links .van-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 0 0;
}

.user-links .van-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.user-links span {
  font-size: 14px;
}

.my-title {
  margin-top: 10px;
}
</style>